<template>
    <div class="bg-white mt-[10px]">
        <BaseHead> 转载情况 <template v-slot:Rslot>
                <el-button @click="addPaperInclude">添加</el-button>
            </template></BaseHead>
        <div class="p-[10px] w-10/12 mx-auto">
            <el-table :data="slTable" border style="width: 100%">
                <el-table-column prop="reshipId" label="转载名称">
                    <template #default="scope">
                        <Feedback :id="scope.row.reshipId" :list="zzmcList" :mapping="['codeColumn', 'valueColumn']">
                        </Feedback>
                    </template>
                </el-table-column>
                <el-table-column prop="reshipType" label="转载类型">
                    <template #default="scope">
                        <Feedback :id="scope.row.reshipType" :list="zzlxList">
                        </Feedback>
                    </template>
                </el-table-column>
                <el-table-column prop="reshipDate" label="转载时间" />
                <el-table-column prop="note" label="备注"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" plain @click="paperIncludeedit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="primary" size="small" plain @click="paperIncludeDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <el-dialog v-model="dialogVisible" append-to-body width="70%" top="25vh" :close-on-click-modal="false" align-center
        :show-close="false" class="slDig" :before-close="handleClose" destroy-on-close draggable>
        <template #header="{ close }">
            <div class="dialog-header flex justify-between items-center">
                <div>转载情况{{ slForm.id ? '编辑' : '新增' }}</div>
                <el-icon class="el-icon--left cursor-pointer" @click="close">
                    <CircleCloseFilled color="#fff" />
                </el-icon>
            </div>
        </template>
        <div class="pt-[30px] pb-[20px] bg-white">
            <el-form :model="slForm" :rules="rules" label-width="130px" ref="slFormRef">
                <el-form-item label="转载名称" prop="reshipId">
                    <el-select v-model="slForm.reshipId" clearable>
                        <el-option v-for="item in zzmcList" :key="item.codeColumn" :label="item.valueColumn"
                            :value="item.codeColumn" />
                    </el-select>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="转载类型" prop="reshipType">
                            <el-select v-model="slForm.reshipType" clearable>
                                <el-option v-for="item in zzlxList" :key="item.code" :label="item.name"
                                    :value="item.code" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="转载时间" prop="reshipDate">
                            <el-date-picker v-model="slForm.reshipDate" type="date" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input v-model="slForm.note" type="textarea" :autosize="{ minRows: 4, }" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <div class="operate-btns">
                    <el-button type="primary" @click="save">确定</el-button>
                    <el-button type="primary" @click="closeDiglog">关闭</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import { getaddPaperReship, getpaperReshipInfo, delPaperReship, geteditPaperReship } from "@/api/achievement/kycg"
import { ElMessage, ElMessageBox } from "element-plus";
import useCategoryStore from "@/store/modules/category";


const props = defineProps({
    productId: String,
})


const categoryStore = useCategoryStore();
const { zzlxList, zzmcList } = storeToRefs(categoryStore); // 解构状态
const { getzzlxList, getzzmcList } = categoryStore; // 解构方法

const slTable = ref([])
const dialogVisible = ref(false)
const slForm = ref({
    reshipId: '',
    reshipType: '',
    reshipDate: '',
    note: '',
    id: '',
    paperId: '',
})
const rules = ref({
    reshipId: [{
        required: true,
        message: '请选择转载名称',
        trigger: 'change',
    }],
    reshipType: [{
        required: true,
        message: '请选择转载类型',
        trigger: 'change',
    }],
    reshipDate: [{
        required: true,
        message: '请选择转载时间',
        trigger: 'change',
    }]

})
const getTable = () => {
    getpaperReshipInfo(props.productId).then((res) => {
        if (res.code == 200) {
            slTable.value = res.data
        }
    })
}
const addPaperInclude = () => {
    dialogVisible.value = true

}
const handleClose = (done) => {
    closeDiglog()
    done()
}

const formatterreshipType = (row, column, cellValue, index) => {
    if (zzlxList.value.length && cellValue) {
        if (zzlxList.value.find(item => item.code == cellValue)) {
            return zzlxList.value.find(item => item.code == cellValue).name
        } else {
            return ''
        }

    } else {
        return ''
    }
}
const formatterrreshipId = (row, column, cellValue, index) => {
    if (zzmcList.value.length && cellValue) {
        if (zzmcList.value.find(item => item.codeColumn == cellValue)) {
            return zzmcList.value.find(item => item.codeColumn == cellValue).valueColumn
        } else {
            return ''
        }

    } else {
        return ''
    }
}
const getCategoryMet = () => {
    slForm.value.paperId = props.productId
    if (!zzlxList.value.length) {
        getzzlxList()
    }
    if (!zzmcList.value.length) {
        getzzmcList()
    }
}
const closeDiglog = () => {
    dialogVisible.value = false
    slForm.value = {
        reshipId: '',
        reshipType: '',
        reshipDate: '',
        note: '',
        id: '',
        paperId: '',
    }
    slForm.value.paperId = props.productId
}
const slFormRef = ref(null)
const save = async () => {
    if (!slFormRef.value) return
    await slFormRef.value.validate((valid, fields) => {
        if (valid) {
            let params = {
                ...slForm.value,
            }
            if (!slForm.value.id) {
                getaddPaperReship(params).then((res) => {
                    if (res.code == 200) {
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                        getTable()
                        closeDiglog()
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'error',
                        })
                    }
                })
            } else {
                geteditPaperReship(params).then((res) => {
                    if (res.code == 200) {
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                        getTable()
                        closeDiglog()
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'error',
                        })
                    }
                })

            }

            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const paperIncludeDel = (i) => {
    ElMessageBox.confirm(
        '确认！删除这条数据?',
        '提醒',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delPaperReship(i.id).then(res => {
                if (res.code == 200) {
                    getTable()
                    ElMessage.success('删除成功')
                }
            })


        })
        .catch(() => {

        })
}
const paperIncludeedit = (i) => {
    slForm.value = i
    dialogVisible.value = true
}



getCategoryMet()
getTable()
</script>
<style scoped lang="scss">
@import url("@/views/achievement/index.scss");
</style>
<style lang="scss">
.slDig {
    padding: 0;
    background-color: #f0f2f5;
    height: 70vh !important;
    overflow-y: hidden;
    margin-top: 25vh !important;

    .el-dialog__body {
        height: 82%;
        overflow: auto;
        padding-bottom: 55px;
    }

}

.slDig:not(.is-fullscreen) {
    margin-top: 15vh !important;
}
</style>